<template>
  <el-popover
    v-model="isShow"
    popper-class="emoji-popover"
    placement="top"
    width="468"
    trigger="click">
    <div
      class="emoji-wrapper"
      :style="{top: top}">
      <ul class="emoji-list">
        <li class="emoji-item"
          v-for="(info,i) in emojiArr"
          :key="i"
          @click.stop="handleChoose(info)">
          <img
            class="emoji-img"
            :src="`//res.wx.qq.com/mpres/htmledition/images/icon/emotion/${info.img}`" :alt="info.text">
        </li>
      </ul>
    </div>
    <span slot="reference">表情</span>
  </el-popover>
</template>
<script>
export default {
  props: {
    top: {
      type: String,
      default: '48px'
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleChoose (info) {
      let imgStr = `<img class="emoji-img" src="//res.wx.qq.com/mpres/htmledition/images/icon/emotion/${info.img}">`
      this.$emit('update', imgStr)
      this.$emit('select', info.img)
      this.isShow = false
    }
  }
}
</script>
<style lang="stylus">
.emoji-popover
  padding 0 !important
  overflow unset
  border-radius 8px
</style>
<style lang="stylus" scoped>
.emoji-wrapper
  padded_box(border-box, 8px 10px)
  .emoji-list
    width 450px
    height 210px
    display flex
    flex-wrap wrap
    .emoji-item
      width 30px
      height 30px
      display flex
      justify-content center
      align-items center
</style>
